<template>
	<view class="content">
		<uv-vtabs :chain="chain" :list="list" :barItemBadgeStyle="{right:'20px',top:'12px'}" @change="change">
		</uv-vtabs>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue';
	let list = ref([]);
	let chain = ref(false);
	let v = ref(0)
	onLoad((option) => {
		catelist();
	})
	const catelist = () => {
		uni.request({
			url: "https://www.xuzhixiang.top:30001/api/pro/categorylist",
			method: "GET",
			success: (res) => {
				console.log(res.data)
				list.value = res.data.data.map(item => {
					return {
						name: item
					}
				})
				uni.hideLoading();
			}
		})
	}

	function change(index) {
		v.value = index;
	}
</script>


<style scoped lang="scss">
	.header {
		padding: 30rpx;
		font-size: 30rpx;
		color: #333;
	}

	.item {
		padding: 10rpx 20rpx;

		&-title {
			.text {
				font-weight: 700;
				font-size: 32rpx;
				color: #111;
			}
		}

		&-content {
			padding: 20rpx 0;

			.text {
				line-height: 48rpx;
				font-size: 30rpx;
				color: #111;
				/* #ifndef APP-NVUE */
				word-break: break-all;
				/* #endif */
			}
		}
	}

	.gap {
		padding: 0 30rpx;
	}
</style>